<!DOCTYPE html>
<html ng-app="demoapp">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../bower_components/angular/angular.min.js"></script>
    <script src="../bower_components/leaflet/dist/leaflet.js"></script>
    <script src="../dist/angular-leaflet-directive.js"></script>
    <script src="http://danzel.github.io/Leaflet.utfgrid/src/leaflet.utfgrid.js"></script>
    <link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
    <script>
        var app = angular.module("demoapp", ["leaflet-directive"]);
        app.controller("LayersLayergroupSimpleController", [ "$scope", function($scope) {
            angular.extend($scope, {
                center: {
                    lat: 39,
                    lng: -100,
                    zoom: 3
                },
                layers: {
                    baselayers: {
                        xyz: {
                            name: 'OpenStreetMap (XYZ)',
                            url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                            type: 'xyz'
                        }
                    },
                    overlays: {}
                }
            });

            var tileLayer = {
              name: 'Countries',
              type: 'xyz',
              url: 'http://{s}.tiles.mapbox.com/v3/milkator.press_freedom/{z}/{x}/{y}.png',
              visible: true,
              layerOptions: {
                attribution: 'Map data &copy; 2013 Natural Earth | Data &copy; 2013 <a href="http://www.reporter-ohne-grenzen.de/ranglisten/rangliste-2013/">ROG/RSF</a>',
                maxZoom: 5
              }
            };

            var utfGrid = {
              name: 'UtfGrid',
              type: 'utfGrid',
              url: 'http://{s}.tiles.mapbox.com/v3/milkator.press_freedom/{z}/{x}/{y}.grid.json?callback={cb}',
              visible: true,
              pluginOptions: {
                maxZoom: 5,
                resolution: 4
              }
            };

            var group = {
              name: 'Group Layer',
              type: 'group',
              visible: true,
              layerOptions: {
                layers: [ tileLayer, utfGrid],
                maxZoom: 5
              }
            };

            $scope.layers['overlays']['Group Layer'] = group;

            $scope.$on('leafletDirectiveMap.utfgridMouseover', function(event, leafletEvent) {
                $scope.country = leafletEvent.data.name;

            });
        }]);
    </script>
</head>
<body ng-controller="LayersLayergroupSimpleController">
    <leaflet lf-center="center" layers="layers" width="100%" height="480px"></leaflet>
    <h1>Layer Groups with nested layer definitions</h1>
    <p>You can add layer groups to a map.  In this case, a UTF Grid and Tile Layer are grouped.  Notice that the layers show as one in the layer selector control.</p>
    <p ng-if=country>You hovered over: <b ng-bind=country></b></p>
    <pre ng-bind="layers | json"></pre>
</body>
</html>
